<template>
  <nav class="navbar navbar-toggleable-md navbar-light shadowed" :class="{'index-head': type=='home','show':collapse}">
    <div class="container">
      <a class="navbar-brand" >
        <img src="/static/img/index/zxy_logo.png" alt="学乎" v-if="type=='home'">
        <img src="/static/img/index/zxy_logo_blue.png" alt="" v-else="">
      </a>
      <div class="collapse navbar-collapse" id="navbarContent">
        <div class="navbar-nav align-items-center ml-auto">
          <router-link to="/" class="nav-item" active-class="active" exact>
            <span class="nav-link">首页</span>
          </router-link>
          <a href="http://www.xuehu365.com" class="nav-item">
            <span class="nav-link">学乎商城</span>
          </a>
          <router-link to="/teachers" class="nav-item" active-class="active">
            <span class="nav-link">讲师中心</span>
          </router-link>
          <div class="sep-vertical mx-3"></div>
          <div class="nav-item ml-lg-3">
            <a  class="btn btn-red text-white font-sm" @click="isEnter=true" >注册</a>
          </div>
          <!--<div class="nav-item ml-lg-3">-->
            <!--<a class="nav-link text-primary">登录</a>-->
          <!--</div>-->
        </div>
      </div>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarContent" @click="collapse=!collapse">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
    <div class="modal fade overlay-black d-block show" v-if="isEnter" @click="isEnter=false">
      <div class="modal-dialog modal-lg modal-mobile">
        <div class="modal-content mt-center pt-4">
          <h4 class="text-center">请选择注册类型</h4>
          <div class="row justify-content-center py-5 text-center px-3">
            <router-link to="/experience/1" class="p-5 br-eee col ">
              <img src="/static/img/index/open_icon_enterprise.png" alt="">
              <div class="text-dark font-xl mt-2">企业大学</div>
            </router-link>
            <router-link to="/experience/2" class="p-5 br-eee col">
              <img src="/static/img/index/open_icon_organization.png" alt="">
              <div class="text-dark font-xl mt-2">培训机构</div>
            </router-link>
            <router-link to="/experience/3" class="p-5 col">
              <img src="/static/img/index/open_icon_personal.png" alt="">
              <div class="text-dark font-xl mt-2">个人讲师</div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </nav>
</template>

<style>
  .navbar{
    background-color: #FFFFFF;
  }
  .br-eee{border-right: 1px solid #E5E5E5}
  .overlay-black {
    background-color: rgba(0,0,0,.65);
  }
  .mt-center{margin-top: 40%}
  .index-head{
    position: absolute !important;
    z-index: 11 !important;
    width: 100% !important;
    top: 0 !important;
    background-color: transparent !important;
  }
  .nav-item { text-decoration: none !important; }
  .nav-link {
    background-position: center .5rem;
    background-repeat: no-repeat;
    text-align: center;
    padding-top: .8rem !important;
    min-width: 6rem;
  }
  .nav-link + .btn-red{
    padding-top: .8rem !important;
  }

  .index-head .nav-link{
    color: #FFFFFF !important;
  }
  .active .nav-link, .nav-link:hover { color: #e50011 !important }

  .navbar-toggler-right { top: 0rem; right: 0 !important;}
  @media (max-width: 575px) {
    .modal-mobile img{
      width: 3rem !important;
    }
    .navbar-toggleable-md > .container {
      padding-right: 0;
      padding-left: 0;
      margin-right: 0;
      margin-left: 0;
    }
    .navbar-brand img{
      width:70% ;
    }
    .navbar-collapse{
      padding-bottom: 1rem;
    }
    .index-head.show{
      background-color: rgba(0, 0, 0, 0.75) !important;
    }
  }
</style>

<script>
  import {User} from '../../resources'

  export default {
    name: 'appHeader',
    data: () => ({
      user: User.current(),
      isEnter:false,
      collapse: false
    }),
    props: ['type'],
    methods: {
      pushAside () {}
    }
  }
</script>
